<template>
	<view class="login">
		<view class="login-title">
			<view class="login-title-hello">
				欢迎使用 !
			</view>
			<view class="login-title-where">
				重庆九健医疗设备维修服务管理客户端
			</view>
		</view>
		<!-- 客户端 -->
		<view class="">
			<view class="container">
				<view class="">
					<view class="choose-avatar-row">
						<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
							<image class="avatar" :src="showUrl"></image>
						</button>
						<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"
							style="display: contents;color: #807E7E;border: none;font-size: 28rpx;text-align: left;">
							<text class="u-button__text">点击选择头像</text>
						</button>
					</view>
					<view class="choose-nickname-row">
						<text>昵称</text>
						<input v-model="nickName" type="nickname" placeholder="请输入昵称" style="color: #807E7E;"
							class='codeinput' />
					</view>
				</view>
			</view>
		</view>
		<button class="login-btn" :disabled="btn" type="default" open-type="getPhoneNumber"
			@getphonenumber="decryptPhoneNumber" @tap="decryptPhoneNumber">获取手机号一键登录</button>
	</view>
</template>


<script>
	import {
		mapMutations
	} from 'vuex'
	import baseUrl from '@/request/baseUrl.js'
	export default {
		data() {
			return {
				beaeUrl: baseUrl,
				hospitalList: [], //搜索的医院的列表
				hospitalName: '', //医院名称
				isSelect: false, //协议勾选
				hospitalId: null, //选择的医院id
				avatarUrl: '',
				nickName: '',
				phone: {},
				showUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0', //                  默认头像
			}
		},
		computed: {
			btn() {
				if (this.avatarUrl && this.nickName) {
					return false
				} else {
					return true
				}
			}
		},
		watch: {},
		onShow() {
			let that = this
			//注意:将代码放在onLoad方法下
			if (!wx.getStorageSync('hadAuthed')) {

				// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
				// An highlighted block
				wx.showModal({
					title: '温馨提示',
					content: '正在请求获取您的个人信息！',
					success(res) {
						if (res.confirm) {
							wx.getUserProfile({
								desc: "获取你的昵称、头像",
								success: res => {
								console.log(res.userInfo,'res,')
								this.showUrl  = res.userInfo.avatarUrl
								this.nickName  = res.userInfo.nickName
									// app.globalData.userInfo =  data
									// wx.setStorageSync('userInfo', data)
									// wx.setStorageSync('hadAuthed', true)
									// wx.getStorageSync('hadAuthed')

									//这里可以发起获取token的请求

									// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
									// 所以此处加入 callback 以防止这种情况
									callback && callback(res);
								},
								fail: res => {
									//拒绝授权
									// that.showErrorModal('您拒绝了请求');
									wx.showToast({
										title: '授权失败',
										icon: 'none',
										duration: 1000
									})
									return;
								}
							})
						} else if (res.cancel) {
							wx.showToast({
								title: '授权失败',
								icon: 'none',
								duration: 1000
							})
							//拒绝授权 showErrorModal是自定义的提示
							// that.showErrorModal('您拒绝了请求');
							return;
						}
					}
				})
			}

			wx.hideHomeButton();
			// this.login()
		},
		methods: {
			decryptPhoneNumber(e) {
				if (e.detail.code) {
					this.$https.post('/user/getWxPhone', {
						code: e.detail.code
					}).then(res => {
						this.phone = res.data;
						console.log(this.phone, '-----------------')
					})
				}
				// let uids = uni.getStorageSync('UID');

			},
			// 选择头像
			async onChooseAvatar(e) {
				let {
					avatarUrl
				} = e.detail
				// console.log(avatarUrl, 'eee')
				// 我这边是把文件上传到云服务器
				let getavatarUrl = await this.uploadFilePromise(avatarUrl)
				console.log(getavatarUrl, '1')
				this.avatarUrl = getavatarUrl.url
				this.showUrl = getavatarUrl.showUrl
			},
			// // 上传头像图片到服务器
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: `${this.beaeUrl}api/common/upload`, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test',
						},
						success: (res) => {
							setTimeout(() => {
								resolve({
									url: JSON.parse(res.data).data.url,
									showUrl: JSON.parse(res.data).data.fullurl,
								})
							}, 1000)
						},
						fail(fails) {
							console.log(fails, 'fail')
						}
					});
				})
			},
			/* 缓存 */
			...mapMutations(['setStorage']),
			/* 勾选协议 */
			select() {
				this.isSelect = !this.isSelect
			},
			/* 选择医院 */
			choiceHospital(n, i) {
				this.hospitalId = i
				this.hospitalName = n
				this.hospitalList = []
			},
			/* 获取医院列表 */
			seachHospital(e) {
				this.$https.post('/hospital/search', {
					name: this.hospitalName,
				}).then(res => {
					this.hospitalList = res.data
				})
			},
			/* 登录 */
			login() {
				if (this.avatarUrl == '') {
					uni.showToast({
						title: '请上传头像',
						icon: 'none'
					});
					return
				}
				if (this.nickName == '') {
					uni.showToast({
						title: '请填写昵称',
						icon: 'none'
					});
					return
				}
				if (this.hospitalId == '') {
					uni.showToast({
						title: '请输入医院名',
						icon: 'none'
					});
					return
				}
				uni.getUserProfile({
					desc: "获取个人信息",
					success: (res) => {
						uni.login({
							provider: 'weixin',
							success: res1 => {
								const {
									code
								} = res1

								this.$https.post('/user/wxLogin', {
									hospital_id: this.hospitalId, //医院id
									avatar: this.avatarUrl,
									nickname: this.nickName,
									code: code
								}).then(res3 => {
									uni.showToast({
										title: res3.msg,
										icon: 'none'
									})
									if (res3.code == 1) {
										this.setStorage(res3.data) //存到vuex
										setTimeout(() => {
											uni.switchTab({
												url: '/pages/home/index'
											})
										}, 1500)
									}
								})
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.form {
		width: 100%;
		height: 100rpx;
		background-color: #F2F2F2;
		/* margin-top:40rpx; */
		/* border-radius: 40rpx; */
		border-bottom: 1px solid #F2F2F2;
	}

	.wx-Logo {}

	.myColor {
		color: #807E7E;
	}

	.desc {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		color: #807E7E;
		font-size: 24rpx;
		text-align: center;
		margin: 50rpx 0;
	}

	.container {
		width: 100%;
		padding: 30px 30px 0;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		background-color: #fff;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;

		.choose-avatar-row,
		.choose-nickname-row {
			height: 90rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 14px 2px;
			font-size: 28rpx;
			border-bottom: 1px solid #F2F2F2;

			.avatar-wrapper {
				width: 44px;
				height: 44px;
				margin: 0;
				padding: 0;
				margin-right: 33rpx;

				.avatar {
					width: 100%;
					height: 100%;
				}
			}
		}

		.choose-nickname-row {
			height: 70rpx;
			border-top: none;
			padding: 10px 2px;

			text {
				width: 45px;
				margin-right: 24rpx;
				color: #807E7E;
				;
			}
		}
	}

	.login {
		width: 90%;
		margin: 0 auto;
	}

	.login .logo {
		margin-top: 100rpx;
		width: 100%;
		height: 300rpx;
		text-align: center;
	}

	.login .logo image {
		width: 200rpx;
		height: 200rpx;
	}

	.login .info {
		width: 100%;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		font-size: 30rpx;
	}

	.login .form {
		width: 100%;
		height: 100rpx;
		background-color: #FFFFFF;
		/* margin-top:40rpx; */
		/* border-radius: 40rpx; */
		border-bottom: 1px solid #F2F2F2;
	}

	.login .form .left {
		width: 100rpx;
		height: 100rpx;
		line-height: 100rpx;
		float: left;
		color: #807E7E;
		text-align: center;
	}

	.login .form .next {
		float: left;
		width: 8px;
		height: 8px;
		border-top: 2px solid #807E7E;
		border-right: 2px solid #807E7E;
		transform: rotate(135deg);
		margin-top: 35rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
	}

	.login .form .right {
		height: 100rpx;
		float: left;
	}

	.login .form .right .logininput {
		width: 90%;
		margin: 0 auto;
		height: 100rpx;
		line-height: 100rpx;
		color: #000000;
		font-size: 26rpx;
	}

	.login .form .input {
		width: 75%;
		margin: 0 auto;
		height: 100rpx;
		line-height: 100rpx;
		color: #000000;
		float: left;
		margin-left: 5%;
		font-size: 26rpx;
	}

	.placeholder {
		font-size: 26rpx;
		color: #807E7E;
		line-height: 60rpx;
	}

	.login .forget {
		text-align: right;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 26rpx;
		color: #000;
	}

	.login .info1 {
		color: #807E7E;
		font-size: 24rpx;
		text-align: left;
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
	}

	.login .form .codeinput {
		width: 60%;
		margin: 0 auto;
		height: 100rpx;
		line-height: 100rpx;
		color: #000000;
		float: left;
		margin-left: 5%;
		font-size: 26rpx;
	}

	.login .form .huoqu {
		width: 30%;
		height: 100rpx;
		line-height: 100rpx;
		float: right;
		font-size: 26rpx;
		text-align: center;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #0066FF;
	}

	.login .form .huoquzhong {
		width: 30%;
		height: 100rpx;
		line-height: 100rpx;
		float: right;
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		text-align: center;
		color: #999999;
	}

	.btn {
		width: 90%;
		margin: 0 auto;
		text-align: center;
		font-size: 26rpx;
	}

	.chonseLogin {
		z-index: 1;
	}

	.btn .button {
		background-color: #ECECEC;
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		// color:#ffffff;
		letter-spacing: 10rpx;
	}

	.btn .desc {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		color: #807E7E;
	}

	.btn .isCheckEd {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		// color:#ffffff;
		letter-spacing: 10rpx;
		background-color: #0066ff;
	}

	.footer {
		width: 90%;
		height: 140rpx;
		margin: 0 auto;
		margin-top: 100rpx;

	}

	.footer .desc {
		width: 100%;
		margin: 0 auto;
		height: 80rpx;
		line-height: 80rpx;
		color: #807E7E;
		text-align: center;
		font-size: 26rpx;
	}

	.login {
		width: 100%;

		&-title {
			width: 100%;
			margin: 48rpx 0 0 34rpx;
			color: #303030;

			&-hello {
				font-weight: 500;
				font-size: 54rpx;
			}

			&-where {
				line-height: 74rpx;
				font-size: 34rpx;
			}
		}

		&-user {
			padding: 0 60rpx;
			color: #979797;


			&-hospital {
				margin-top: 30rpx;
				position: relative;

				input {
					border-bottom: 2rpx solid #EDEEF2;
					padding-bottom: 30rpx;
				}

				&-hospitalList {
					position: absolute;
					top: 50rpx;
					width: 100%;
					z-index: 99;
					background-color: #FFFFFF;
					border: 2rpx solid #fafafa;

					&-child {
						line-height: 50rpx;
					}
				}
			}


			&-rules {
				font-size: 24rpx;
				margin: 30rpx 0 60rpx;

				&-href {
					color: $public-oclor;
					border-bottom: 2rpx solid $public-oclor;
				}
			}
		}

		&-admin {
			margin: 0rpx 64rpx;

			input {
				border-bottom: 2rpx solid #EDEEF2;
				margin-top: 66rpx;
			}
		}

		&-btn {
			margin: 0 64rpx;
			height: 96rpx;
			border-radius: 48rpx;
			font-size: 32rpx;
			line-height: 96rpx;
			color: #fff;
			background-color: #1A66FF;
			margin-top: 70rpx;
		}

		&-btn::after {
			border: none;
		}

		&-xieyi {
			margin-top: 30rpx;
			display: flex;
			color: #646466;
			font-size: 22rpx;
			line-height: 40rpx;


			&-color {
				color: $public-oclor;
			}
		}
	}
</style>